<script setup>
	import router from "@/router/index.js";
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		getMainPageData
	} from '@/api/getData.js'
	import {
		getStorage,
		setStorage
	} from "@/utils/localStorage.js";

	//跳转到登录页面
	function loginView() {
		router.push('/login');
	}
	const datas = reactive([]);
	const getNews = () => {
		getMainPageData().then(res => {
			console.log(res);
			datas.splice(0, 10, ...res.datas);
			console.log('datas', datas)
		})
	}
	onMounted(() => {
		getNews();
	})
</script>

<template>
	<!--
        首先展示的门户页面
        中间登录跳转到登录页面
  -->
	<div class="common-layout">
		<el-container class="el-container">
			<el-header class="header">
				<h1 class="headerh1" style="font-size: 30px">家校通信息门户</h1>
			</el-header>

			<el-main class="main" style="padding: 0px;">
				<h2 class="mainh2">艰苦朴素 实事求是</h2>
				<h3 class="mainh3">严谨要求 勇于探索</h3>
				<el-button class="login" @click="loginView">登录</el-button>

				<!-- 公告和新闻标题部分 -->
				<div class="titles">
					<el-button class="announcement-title">公告</el-button>
					<el-button class="news-title">新闻</el-button>
				</div>

				<div class="report-container">
					<div class="report">
						<h1 v-for="data in datas.slice(0, 8)" :key="data.id">{{data.content}}</h1>
					</div>
					<div class="report2">
						<h1 v-for="data in datas.slice(9, 16)" :key="data.id">{{data.content}}</h1>
						<h1>周澍同学上课拉屎</h1>
					</div>
				</div>

			</el-main>

			<el-footer class="footer" style="text-align: center">孜孜不倦默默无闻,写不出码要崩溃队</el-footer>
		</el-container>
	</div>

</template>

<style scoped>

	.common-layout {
		background-color: #cce5ff;
		background-image:
			radial-gradient(closest-side, rgba(20, 134, 182, 1), rgba(20, 243, 20, 0));
		background-size:
			130vmax 130vmax,
			80vmax 80vmax,
			90vmax 90vmax,
			110vmax 110vmax,
			90vmax 90vmax;
		background-position:
			-80vmax -80vmax,
			60vmax -30vmax,
			10vmax 10vmax,
			-30vmax -10vmax,
			50vmax 50vmax;
		background-repeat: no-repeat;
		animation: 8s movement linear infinite;
		height: 100vh;
	}
	.el-main{
		--el-main-padding: 0px;
	}
	.main {
		padding: 0px !important;
		/* 顶部留出一定的内边距 */
		width: 70%;
		/* 主体内容宽度占比 */
		margin: 60px auto;
		/* 水平居中 */
		text-align: center;
		/* 让内部文本居中 */
	}

	.mainh2 {
		font-size: 65px;
		/* 设置mainh2字体大小 */
		margin-left: 0px;
		font-family: "楷体", serif;
		color: white;
		/* 设置字体颜色为白色 */
		font-weight: bolder;
		padding-top: 0px;
	}

	.mainh3 {
		font-size: 65px;
		/* 设置mainh3字体大小 */
		margin-left: 30%;
		/* 距离左边40% */
		font-family: "楷体", serif;
		color: white;
		/* 设置字体颜色为白色 */
		font-weight: bolder;
		//padding-top: 10px;
		padding-top: 0px;
	}

	.header {
		background-color: #8dc6e6;
		padding: 10px;
	}

	.headerh1 {
		font-size: 30px;
		color: white;
		margin: 0;
		padding-left: 15px;

	}

	.login {
		background-color: skyblue;
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
		text-decoration: none;
		display: inline-block;
		transition: background-color 0.5s ease;
		/* 添加过渡效果 */
		width: 150px;
		height: 50px;

	}

	.login:hover {
		background-color: steelblue;
		transition-delay: 0.05s;
		/* 延迟过渡效果 */
	}

	.report-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 让子元素在父容器内均匀分布，两端对齐 */
		margin-top: 20px;
		/* 适当的上边距 */
	}

	.report,
	.report2 {
		flex: 1;
		/* 平分父容器的空间 */
		background-color: rgba(0, 0, 0, 0.1);
		/* 设置背景颜色 */
		padding: 0px;
		/* 内边距 */
		font-family: Arial, serif;
		color: white;
		/* 设置字体颜色为白色 */
		text-align: left;
		padding-left: 20px;
	}

	/* 新增样式部分 */
	.titles {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		/* 添加一定的内边距 */
	}

	.announcement-title {
		margin: 0;
		/* 清除默认的标题上下边距 */
		font-size: 30px;
		/* 调整字体大小 */
		font-family: Arial, serif;
		color: black;
		/* 设置字体颜色为白色 */
	}

	.news-title {
		margin: 0;
		/* 清除默认的标题上下边距 */
		font-size: 30px;
		/* 调整字体大小 */
		font-family: Arial, serif;
		color: black;
		/* 设置字体颜色为白色 */
	}

	.footer {
		font-size: 15px;
		padding-top: 100px;
		color: black;
	}
</style>